<template>
    <div class="content">
        <el-drawer title="课程详情" :visible.sync="drawer" :before-close="handleClose"
            :wrapperClosable="false" size="40%">
            <el-card class="course_info">
                <el-row type="flex" justify="space-between">
                    <el-col :span="6">
                        <el-avatar style="width: 90px; height: 90px; margin-top: 25px;"
                                   :src="require('../../assets/img/avator.jpg')"></el-avatar>
                    </el-col>
                    <el-col :span="18">
                        <h3>
                            <strong style="font-size: 25px;">融海云创——JKenan</strong>
                            <i style="color: #67c23a; font-size: 25px;" class="el-icon-success"></i>
                        </h3>
                        <p class="lecturer_desc">
                            十年一线大厂经验，中科院研究院技术专家，全栈技术开发。
                        </p>
                        <p class="lecturer_desc"> 
                            粉丝数:968789
                        </p>
                    </el-col>
                </el-row>
            </el-card>

            <div style="width: 96%; margin: 0px auto">
                <el-image :src="require('../../assets/img/courseurl.jpg')" fin="contain"></el-image>
            </div>
            <el-card class="course_info">
                <p>
                    本课程从基础的 Vue
                    源码构建开始讲起，
                    包括数据驱动，响应式原理，
                    让大家深入全面理解Vue的实现原理，
                    掌握源码分析技巧，
                    牢固对Vue的使用。
                </p>
            </el-card>  
        </el-drawer>
    </div>
</template>


<script>
export default{
    data(){
        return{
            drawer: false,
            formData: {
                id: '',
                lecturer: '',
                lecturerDesc: '',
                fans: ''
            }
        }
    },

    methods: {
        handleClose(){
            this.drawer = false
        },

        async getCourseDetail(){
            const result = await this.$axios.get("/course/detail", {
                params: { id: this.formData.id }
            })

            if(result.data.success){
                Object.assign(this.formData, result.data.data)
            }else{
                this.$message.error(result.data.message)
            }
        }

    }
}

</script>


<style>
.course_info{
    margin: 0px 10px 10px
}

.lecturer_desc{
    color: gray;
    font-size: 18px
}

</style>